<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <style>
        body {
            background: #f2f2f2
        }

        .shop {
            height: 12.35rem;
            margin: .6rem;
            text-align: center;
            box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.1);
            border-radius: .5rem;
            padding-top: 1.2rem;
            background: #fff
        }

        .shop-logo {
            margin: 0 auto .5rem auto;
        }

        .welcome {
            height: 8rem;
            background: linear-gradient(to right, #E94B41, #EA4569);
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            ;
            align-items: center;
        }

        .address-info {
            height: 3.5rem;
            margin: .6rem .6rem 1rem .6rem;
            box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.1);
            border-radius: .5rem;
            background: #fff;
            padding: .6rem
        }

        .address {
            margin-top: .3rem
        }

        .btn {
            width: calc(100% - 4rem)
        }
    </style>
</head>

<body>
    <div id="app">
        <section>
            <div class="welcome">
                <div class="font-20">
                    欢迎来到好获拼拼
                </div>
                <div class="font-14" style="margin-top:.4rem">请选择离您最近的店铺为您服务</div>
            </div>
        </section>
        <section>
            <div class="font-14 text-color-3 address-info">
                <div class="flex-justify-between">
                    <div class="">
                        当前位置
                    </div>
                    <div class="flex-align-center" tapmode @click='updateAddress'>
                        <img class='img-15' src="../image/index/dw-red.png" alt="">
                        <span class="font-12 red-text">修改位置</span>
                    </div>
                </div>
                <div class="address">
                    {{addressName}}
                </div>
            </div>
        </section>
        <section>
            <div class="font-14 text-color-3" style="text-align:center;">
                为你推荐附近优质店铺
            </div>
        </section>
        <section>
            <div class="font-14 text-color-3 shop">
                <img class='img-50 shop-logo' src="../image/index/logo1.png" alt="">
                <div class="font-16 text-color-3">
                    万嘉便利店
                </div>
                <div class=" text-color-9" style="margin:.5rem">福州市马尾区世创大厦10层</div>
                <div class="font-12 text-color-9 flex-justify-around">
                    <div>粉丝<span class="text-color-3">123</span></div>
                    <div>购买指数<span class="text-color-3">354</span></div>
                    <div>距您<span class="text-color-3">100m</span></div>
                </div>
                <div class="height-40" style="margin-top:1rem">
                    <button class='red-btn btn'>进入店铺</button>
                </div>
            </div>
            <div class="font-14 text-color-3 shop">
                <img class='img-50 shop-logo' src="../image/index/logo1.png" alt="">
                <div class="font-16 text-color-3">
                    万嘉便利店
                </div>
                <div class=" text-color-9" style="margin:.5rem">福州市马尾区世创大厦10层</div>
                <div class="font-12 text-color-9 flex-justify-around">
                    <div>粉丝<span class="text-color-3">123</span></div>
                    <div>购买指数<span class="text-color-3">354</span></div>
                    <div>距您<span class="text-color-3">100m</span></div>
                </div>
                <div class="height-40" style="margin-top:1rem">
                    <button class='red-btn btn'>进入店铺</button>
                </div>
            </div>
        </section>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript " src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js "></script>
<script type="text/javascript">

    apiready = function() {
      var vm = new Vue({
          el: '#app',
          data() {
              return {
                  addressName: '地址',
                  lon:0,
                  lat:0
              }
          },
          mounted() {
              this.getAddress();
          },
          methods: {
              getAddress: function() {
                  var _this = this;
                  var bMap = api.require('bMap');
                  bMap.getLocation({
                      accuracy: '100m',
                      autoStop: true,
                      filter: 1
                  }, function(ret, err) {
                      if (ret.status) {
                          _this.lon = ret.lon;
                          _this.lat = ret.lat
                          var map = api.require('bMap');
                          map.getNameFromCoords({
                              lon: ret.lon,
                              lat: ret.lat
                          }, function(ret, err) {
                              if (ret.status) {
                                  var ret = JSON.stringify(ret.address);
                                  // 正则去掉字符串前后的双引号
                                  var reg = new RegExp('"', "g");
                                  var newStr = ret.replace(reg, "");
                                  _this.addressName = newStr
                              }
                          });
                      } else {
                          alert(err.code);
                      }
                  });
              },
              updateAddress: function() {
                  var map = api.require('bMap');
                  map.open({
                      rect: {
                          x: 0,
                          y: 0,
                          w: api.winWidth,
                          h: api.winHeight
                      },
                      center: {
                          lon: this.lon,
                          lat: this.lat
                      },
                      zoomLevel: 13,
                      showUserLocation: true,
                      fixedOn: api.frameName,
                      fixed: true
                  }, function(ret) {
                      if (ret.status) {
                      }
                  });
              }
          }
      });
        api.parseTapmode();
    };
</script>

</html>
